/*
1、slot 占位符
2、对外提供数据 滑动方向
*/
<template>
    <view
        @touchstart="handleTouchstart"
        @touchend="handleTouchend"
    >
<!--        <view>swiperaction</view>-->
        <slot></slot>
    </view>
</template>

<script>
    export default {
        name: "swiperAction",
        data() {
            return {
                // 按下的时间
                startTime: 0,
                // 按下的坐标
                startX: 0,
                startY: 0
            }
        },
        methods: {
            handleTouchstart(event) {
                this.startTime = Date.now();
                this.startX = event.changedTouches[0].clientX;
                this.startY = event.changedTouches[0].clientY;
            },
            handleTouchend(event) {
                const endTime = Date.now()
                const endX = event.changedTouches[0].clientX;
                const endY = event.changedTouches[0].clientY;
                if (Math.abs(endTime - this.startTime) > 2000 ){
                    return;
                }
                let direction = "";
                if (Math.abs(endX - this.startX) > 10 && Math.abs(endY - this.startY) < 10 ) {
                    direction = endX -this.startX > 0 ? "right" : "left"
                }else {
                    return;
                }
                // console.log(direction)
                this.$emit("swiperAction", {direction});
            }
        }
    }
</script>

<style scoped>

</style>
